<template>
  <a-modal :visible="visible" title="审批详情" @cancel="handleOk">
    <a-row class="header">
      <img class="w48" src="@/assets/img/48@3x.png" alt="" />
      <div>
        <h2>刘洋 <span class="color9C9C9C fs12">（申请人）</span></h2>
        <div class="fs12 tc-theme">审批通过</div>
      </div>
    </a-row>
    <a-row class="btmline lh48 color3"> <span class="small-title"> 预计调岗时间 </span> 566986369756235 </a-row>
    <a-row class="pt16 color3"> <span class="small-title"> 调岗部门 </span> 2020-01-02 16:25:05 </a-row>
    <a-row class="pb16 color3"> <span class="small-title"> 调岗岗位 </span> 入职审批 </a-row>
  </a-modal>
</template>
<script>
export default {
  props: ["data"],
  data() {
    return {
      visible: true
    };
  },

  methods: {
    handleOk(e) {
      this.$emit("visibleApprovalModal");
    }
  }
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  .w48 {
    width: 48px;
    height: 48px;
    margin-right: 13px;
  }
}
>>> .ant-timeline-item-content {
  margin: 0 0 0 28px;
}

.space {
  padding-top: 24px;
  padding-left: 16px;
}

>>> .ant-timeline-item-head img {
  width: 35px;
  height: 35px;
}

>>> .ant-timeline-item-content .anticon {
  position: absolute;
  left: -20px;
  top: 15px;
}

.h34 {
  height: 34px;
}

.lh34 {
  line-height: 34px;
}

.pl12 {
  padding-left: 12px;
}

h2 {
  font-size: 16px;
  color: #333;
}

.color3 {
  color: #333;
}
.bgFAFAFA {
  background: #fafafa;
}

.color9C9C9C {
  color: #9c9c9c;
}
.small-title {
  color: #777;
  padding-right: 26px;
}
</style>
